<template>
	<!-- 新建组织 -->
	<view class="neworganization-container">

		<view class="padd">
			<!-- 标题 -->
			<view class="title">组织名称和头像</view>
			<!-- 表单 -->
			<u--form labelPosition="left" :model="model" :rules="rules" ref="newOrg" labelWidth="162rpx" :labelStyle="{fontSize: '28rpx',
			fontFamily: 'Source Han Sans CN-Medium, Source Han Sans CN',
			fontWeight: 500,
			color: '#333333',
			lineHeight: '28rpx',
			letterSpacing: '1px'}">
				<u-form-item label="组织名称" prop="name" borderBottom ref="item1">
					<u--input v-model="model.name" border="none" placeholder="请输入组织名称(2-20个字)"></u--input>
				</u-form-item>
				<u-form-item label="组织头像" prop="avatar" borderBottom ref="item1" @tap="uploadAvatar">
					<view class="avatar">
						<image :src="model.avatar?model.avatar:'/static/Organization/upload.png'"></image>
					</view>
				</u-form-item>
				<u-form-item label="名称" prop="create_nickname" borderBottom ref="item1">
					<u--input v-model="model.create_nickname" border="none" placeholder="请输入管理员名称"></u--input>
				</u-form-item>
				<u-form-item label="联系方式" prop="create_phone" borderBottom ref="item1">
					<u--input v-model="model.create_phone" border="none" placeholder="请输入管理员电话号码"></u--input>
				</u-form-item>
			</u--form>
		</view>

		<!-- 底部按钮 -->
		<BottomButton @setHandleBtn="getHandleBtn">
			<template>
				<view>申请创建组织</view>
			</template>
		</BottomButton>
	</view>
</template>

<script>
	import BottomButton from '@/componets/BottomButton/BottomButton.vue'
	export default {
		data() {
			return {
				// 实名认证信息
				model: {
					name: '',
					avatar: '',
					create_nickname: '',
					create_phone: ''
				},

				// 实名认证规则
				rules: {
					'name': [{
						type: 'string',
						min: 2,
						max: 20,
						required: true,
						message: '请输入组织名称',
						trigger: ['blur', 'change']
					}],
					'avatar': [{
						type: 'string',
						required: true,
						message: '请选择头像',
						trigger: ['blur', 'change']
					}],
					'create_nickname': [{
						type: 'string',
						required: true,
						message: '请输入管理员名称',
						trigger: ['blur', 'change']
					}, {
						pattern: /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '请正确输入管理员名称'
					}],
					'create_phone': [{
						type: 'string',
						required: true,
						message: '请输入管理员电话号码',
						trigger: ['blur', 'change']
					}, {
						pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '请正确填写管理员电话号码'
					}, ]
				},
			}
		},
		methods: {
			/**
			 * 上传头像
			 */
			uploadAvatar() {
				uni.chooseImage({
					count: 1,
					success: res => {
						this.model.avatar = res.tempFilePaths[0]
					}
				})
			},

			/**
			 * 申请创建组织
			 */
			getHandleBtn() {
				this.$refs.newOrg.validate().then(res => {
					// 先提交注册信息
					this.$request.post({
						url: '/api/organization/addOrganization',
						data: this.model,
						success: res => {
							if (res.code != 200) return uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							this.model = {
								name: '',
								avatar: '',
								create_nickname: '',
								create_phone: ''
							}
							uni.showToast({
								title: res.msg,
								icon: 'none',
								mask: true,
								success: res => {
									uni.navigateBack()
								}
							})
						}
					})
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.newOrg.setRules(this.rules)
		},
		components: {
			BottomButton
		}
	}
</script>

<style lang="less" scoped>
	.neworganization-container {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;

		.padd {
			width: 100%;
			padding: 0 40rpx;
			box-sizing: border-box;

			>.title {
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #333333;
				line-height: 28rpx;
				letter-spacing: 1px;
				margin-top: 20rpx;
			}

			/deep/.u-form {
				margin-top: 40rpx;

				.avatar {
					width: 92rpx;
					height: 92rpx;

					>image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>